Docusaurus 配置使用过程

Docusaurus，一款基于React的文档框架， 博客文章支持Docusaurus Markdown功能，如MDX。

在mdx内使用组件, 可以将组件写在文件内部, 当然也可以写在components中, 然后导入

以上两种都可以作为解决方案, 不过有更好的解决方案: 全局组件

1. 创建/src/theme/MDXComponents.js文件 (swizzle 弹出时必须指定组件, 只能手动创建了), 以Highlight为例:

import React from 'react';
// 导入原映射
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/blog_components/Highlight';

export default {
    // 复用默认的映射
    ...MDXComponents,
    // 把 "highlight" 标签映射到我们的 <Highlight /> 组件！
    // `Highlight` 会收到在 MDX 中被传递给 `highlight` 的所有 props
    highlight: Highlight,
};

效果:

我可以随时随地用 Docusaurus 绿了！